<template>
  <div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="工厂名称">
        <el-input v-model="formInline.factoryName" placeholder="工厂名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="list">查询</el-button>
      </el-form-item>
    </el-form>

    <el-table
      :data="tableData"
      border
      style="width: 100%">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        fixed
        prop="factoryId"
        label="工厂ID"
        width="120">
      </el-table-column>
      <el-table-column
        prop="factoryCode"
        label="工厂序号"
        width="120">
      </el-table-column>
      <el-table-column
        prop="factoryName"
        label="工厂的名称"
        width="120">
      </el-table-column>
      <el-table-column
        prop="cityName"
        label="省/市/区"
        width="200">
        <template v-slot="r">
          {{r.row.provinceName}} -- {{r.row.districtName}} -- {{r.row.cityName}}
        </template>
      </el-table-column>
      <el-table-column
        prop="factorySort"
        label="工厂的排序"
        width="130">
      </el-table-column>
      <el-table-column
        prop="factoryFounder"
        label="创建人"
        width="120">
      </el-table-column>
      <el-table-column
        prop="factoryCreationTime"
        label="创建时间"
        width="200">
      </el-table-column>
      <el-table-column
        prop="factoryPeople"
        label="联系人"
        width="120">
      </el-table-column>
      <el-table-column
        prop="phone"
        label="联系人电话"
        width="120">
      </el-table-column>
      <el-table-column
        prop="factoryRemark"
        label="备注"
        width="120">
      </el-table-column>
      <el-table-column
        prop="cropName"
        label="农作物"
        width="120">
      </el-table-column>
      <el-table-column
        label="图片"
        width="120">
        <template v-slot="s">
          <el-image
            style="width: 100px; height: 100px"
            :src="s.row.avatar"></el-image>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="140">
        <template slot-scope="scope">
          <el-button @click="openAdd" type="text" size="small">添加</el-button>
            <el-button @click="openUpdate(scope.row)" type="text" size="small">修改</el-button>
          <el-button @click="FactoryDelete(scope.row.factoryId)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :title='title' :visible.sync="dialogFormVisible" >
      <el-form :model="form1">
        <el-form-item label="工厂序号" :label-width="formLabelWidth" prop="factoryCode">
          <el-input v-model="form1.factoryCode" autocomplete="off" ></el-input>
        </el-form-item>
        <el-form-item label="工厂名称" :label-width="formLabelWidth" prop="factoryName">
          <el-input v-model="form1.factoryName" autocomplete="off" ></el-input>
        </el-form-item>
        <el-form-item label="省/市/区" :label-width="formLabelWidth">
          <el-cascader   v-model="areaIds"  :options="options"    @change="getchange"  clearable></el-cascader>
        </el-form-item>
        <el-form-item label="工厂的排序" :label-width="formLabelWidth" prop="factorySort">
          <el-input-number v-model="form1.factorySort" controls-position="right" :min="1" :max="9"></el-input-number>
        </el-form-item>
        <el-form-item label="创建人" :label-width="formLabelWidth">
          <el-input v-model="form1.factoryFounder" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="联系人" :label-width="formLabelWidth" prop="factoryPeople">
          <el-input v-model="form1.factoryPeople" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" :label-width="formLabelWidth" prop="factoryPhone">
          <el-input v-model="form1.factoryPhone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input v-model="form1.factoryRemark" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="农作物名称" :label-width="formLabelWidth">
          <el-select v-model="form1.cropId" placeholder="请选择农作物">
            <el-option
              v-for="item in opt"
              :key="item.cropId"
              :label="item.name"
              :value="item.cropId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="图片" :label-width="formLabelWidth">
          <el-upload
            class="avatar-uploader"
            action="http://localhost:8100/"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :befor-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addOrUpdate('ruleForm')">确 定</el-button>
      </div>
    </el-dialog>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="[3, 5, 10, 15]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>

  </div>
</template>

<script>
import {listfactory, cityList, addFactory, cropList,getSelect,factoryDelete} from "../../api/farme/farme";

export default {
  name: "FactoryView",
  data(){
    return{
      formInline:{},
      tableData:[],
      total:0,
      pageNum:1,
      pageSize:3,
      options:[],
      formLabelWidth: '120px',
      form1:{},
      dialogFormVisible:false,
      areaIds:[0,0,0],
      opt:[],
      imageUrl:"",
      title: "",
    }
  },
  methods:{
    list(){
      listfactory(this.pageNum,this.pageSize,this.formInline).then(r=>{
        this.tableData=r.data.list
        this.total=r.data.total
      })
    },
    handleCurrentChange(val) {
      this.pageNum=val
      this.list();
    },
    handleSizeChange(val) {
      this.pageSize=val
      this.list();
    },
    cityList(){
      cityList().then(r=>{
        this.options=r.data
      })
    },
    cropList(){
      cropList().then(r=>{
        this.opt=r.data
      })
    },
    openAdd(){
      this.areaIds=[];
      this.form.factoryId = ""
      this.form={factorySort:'0'};
      this.dialogFormVisible=true
      this.title = "添加工厂表";
    },
    openUpdate(row){
      console.log(row)
      this.form1=row
      this.title = "修改工厂表";
      this.areaIds=[];
      this.dialogFormVisible=true;
      if (row.xid){
        this.areaIds.push(row.xid,row.sid,row.qid)
      }
      console.log(this.areaIds)
      this.imageUrl=row.avatar
      getSelect(this.form1.factoryId).then(r=>{
        this.form1=r.data;
        this.form1.cropName=r.data.cropName;
        this.form1.provinceName=r.data.provinceName;
        this.form1.cityName=r.data.cityName;
        this.form1.districtName=r.data.districtName;
      })

    },
    addOrUpdate(){
      if (this.form.factoryId !=undefined){
        addFactory(this.form).then(r=>{
          this.$message.success("修改成功");
          this.dialogFormVisible=false;
          this.list();
        })
      }else {
        addFactory(this.form).then(r=>{
          this.dialogFormVisible=false;
          this.$message.success("添加成功");
          this.list();
        })
      }
    },
    getchange(id){
      console.log(id);
      if (id.length>1){
        this.form.xid=id[0];
        this.form.sid=id[1];
        this.form.qid=id[2];
      }else {
        this.form.provinceId='';
      }
    },
    FactoryDelete(factoryId){
      factoryDelete(factoryId).then(r=>{
        if (r.code==200){
          this.$message.success("删除成功");
          this.list();
        }else {
          this.$message.success("删除失败");
          this.list();
        }
      })
    },
    handleAvatarSuccess(res,file){
      this.imageUrl=URL.createObjectURL(file.raw)
      this.form.avatar=res
    },
    beforeAvatarUpload(file){
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },

  },
  created() {
    this.list();
    this.cityList();
    this.cropList();
  }
}
</script>

<style scoped>

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

</style>
